<template>

  <div id="roleList">
    <el-container>
      <el-main>
        <el-row>
          <!-- 左边角色列表 start -->
          <el-col :span="leftLayoutWidth">
            <div class="grid-content gridLeft">
              <h4>角色树</h4>
              <el-row>
                <div class="userHandle">
                  <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddRole"
                             size="mini">
                    新增
                  </el-button>
                  <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateRole" size="mini">修改
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" round @click.native="deleteRole" size="mini">删除
                  </el-button>
                </div>
              </el-row>
              <el-tree :data="roleTreeList" :props="roleProps" @node-click="roleTreeClick" highlight-current></el-tree>
            </div>
          </el-col>


          <!-- 右边权限列表、角色列表 start -->
          <el-col :span="rightLayoutWidth">
            <div class="grid-content  gridRight">
              <h4>角色权限</h4>
              <el-row>
                <div class="userHandle" style="text-align: left">
                  <el-button type="primary" icon="el-icon-circle-plus-outline" round
                             @click.native="openSaveRightRoleDialog"
                             size="mini">分配权限
                  </el-button>
                </div>
              </el-row>

              <!-- 父权限列表 -->
              <el-table
                :data="rightDataList"
                style="width: 100%"
              >

                <!-- 列表的首列拓展 -->
                <el-table-column type="expand">

                  <!-- 子权限列表模板 -->
                  <template slot-scope="props">
                    <!-- 子权限列表 start -->
                    <el-table
                      :data="props.row.childrenList"
                      style="width: 100%" :show-header="false" border>
                      <el-table-column
                        label="权限名称"
                        prop="systemRightName"
                        align="center">
                      </el-table-column>
                      <el-table-column
                        label="权限标识"
                        prop="systemRightPermission"
                        align="center">
                      </el-table-column>
                      <el-table-column
                        label="权限类型"
                        prop="systemRightType"
                        :formatter="formatSystemRightType"
                        align="center">
                      </el-table-column>
                      <el-table-column
                        label="权限状态"
                        prop="isEnabled"
                        :formatter="formatSystemRightIsEnabled"
                        align="center">
                      </el-table-column>
                    </el-table>
                    <!-- 子权限列表 end -->
                  </template>

                </el-table-column>

                <el-table-column
                  label="权限名称"
                  prop="systemRightName"
                  align="center">
                </el-table-column>
                <el-table-column
                  label="权限标识"
                  prop="systemRightPermission"
                  align="center">
                </el-table-column>
                <el-table-column
                  label="权限类型"
                  prop="systemRightType"
                  :formatter="formatSystemRightType"
                  align="center">
                </el-table-column>
                <el-table-column
                  label="权限状态"
                  prop="isEnabled"
                  :formatter="formatSystemRightIsEnabled"
                  align="center">
                </el-table-column>
              </el-table>

            </div>

            <!-- 右边用户列表 start -->
            <div class="grid-content gridRight">
              <h4>角色用户</h4>
              <el-row>
                <div class="userHandle" style="text-align: left">
                  <el-button type="primary" icon="el-icon-circle-plus-outline" round
                             @click.native="addUser"
                             size="mini">新增关联
                  </el-button>
                </div>
              </el-row>

              <!-- 用户列表数据 -->
              <el-table
                :data="userDataList"
                style="width: 100%">
                <el-table-column
                  prop="systemStaffAccount"
                  label="用户账号"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="systemStaffName"
                  label="用户名称"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="systemDepartment"
                  label="所属部门"
                  align="center"
                  :formatter="formatSystemDepartmentName">
                </el-table-column>
                <el-table-column
                  prop="isLockedStr"
                  label="是否可用"
                  align="center"
                  :formatter="formatIsLocked">
                </el-table-column>
              </el-table>
              <el-pagination
                layout="prev, pager, next"
                :page-sizes="[5]"
                :page-size="userListPageSize"
                :total="userListPageTotal"
                @current-change="currentChangeUserListPage">
              </el-pagination>

            </div>
          </el-col>




        </el-row>

        <!-- 角色表单窗口 -->
        <el-dialog title="角色信息" :visible.sync="roleInfoDialog">
          <el-form :model="roleForm" ref="roleForm" label-position="left">
            <el-form-item label="角色名称" :label-width="formLabelWidth" prop="systemRoleName"
                          :rules="{required: true, message: '角色名称不能为空', trigger: 'blur'}">
              <el-input v-model="roleForm.systemRoleName" autocomplete="off" placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色备注" :label-width="formLabelWidth">
              <el-input v-model="roleForm.systemRoleRemark" autocomplete="off" placeholder="角色备注"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="roleInfoDialog = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdateRole('roleForm')">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 分配权限菜单窗口 -->
        <el-dialog title="分配权限菜单" :visible.sync="rightInfoDialog">
          <el-tree :data="rightTreeList" :props="rightProps"
                   show-checkbox
                   node-key="systemRightId"
                   ref="rightTree"
          ></el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="rightInfoDialog = false">取 消</el-button>
            <el-button type="primary" @click="savePrivilegeRole()">确 定</el-button>
          </div>
        </el-dialog>

        <!--新增用户列表菜单窗口-->
        <el-dialog title="用户" :visible.sync="addStaffInfo">
          <el-table
            :data="StaffList"
            highlight-current-row
            @row-click="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="systemStaffAccount"
              label="用户账号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="systemStaffName"
              label="用户名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="systemDepartment"
              label="所属部门"
              align="center"
              :formatter="formatSystemDepartmentName">
            </el-table-column>
            <el-table-column
              prop="isLockedStr"
              label="是否可用"
              align="center"
              :formatter="formatIsLocked">
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-sizes="[5]"
            :page-size="userListPageSize"
            :total="userListPageTotal"
            @current-change="currentChangeUserListPage">
          </el-pagination>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addStaffInfo = false">取 消</el-button>
            <el-button type="primary" @click="saveStaff()">确 定</el-button>
          </div>

        </el-dialog>
      </el-main>
    </el-container>
  </div>

</template>

<script>
  import common from "@/assets/js/common/common.js";

  export default{
    data(){
      return {
        leftLayoutWidth: 6,//左边布局宽度格数
        rightLayoutWidth: 18,//右边布局宽度格数
        roleTreeList: [], //角色数据列表
        //树形角色定义的格式对应关系
        roleProps: {
          children: 'children',
          label: 'systemRoleName'
        },
        formLabelWidth: '120px', //form表单的宽度
        roleInfoDialog: false, //角色表单窗口
        //角色表单
        roleForm: {
          systemRoleId: null,
          systemRoleName: "",
          systemRoleRemark: ""
        },
        rightInfoDialog: false, //权限窗口开关
        rightTreeList: [], //分配权限的树形列表数据
        //树形权限定义的格式对应关系
        rightProps: {
          children: 'childrenList',
          label: 'systemRightName'
        },
        selectRightTreeList: [], //选中权限树的数据列表
        rightDataList: [], //右边权限列表
        //权限类型列表
        rightTypeList: [
          {
            value: "1",
            msg: "菜单"
          },
          {
            value: "2",
            msg: "按钮"
          }
        ],
        userDataList: [],  //右边用户列表
        userListPageTotal: 0,//用户列表总数
        userListPageSize: 10, //用户每页显示的数据量
        userListPageNo: 1,   //用户分页的当前页、
        addStaffInfo: false,
        currentRow: null,
        StaffList: []
      }
    },
    mounted: function () {
      //需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
      this.getRoleList({});//获取角色分页列表
      this.getPrivilegeTree(); //加载权限树形数据
    },
    methods: {
      /**
       * 获取角色列表
       * */
      getRoleList(param){
        this.roleTreeList = [{
          "systemRoleId": "730938838360260608",
          "systemRoleName": "系统管理员",
          "systemRoleParentId": "",
          "createDate": "2018-09-04 17:05:41",
          "systemRoleRemark": ""
        }, {
          "systemRoleId": "730938838360260608",
          "systemRoleName": "用户管理员",
          "systemRoleParentId": "",
          "createDate": "2018-09-04 17:05:41",
          "systemRoleRemark": ""
        }, {
          "systemRoleId": "730938838360260608",
          "systemRoleName": "日志管理员",
          "systemRoleParentId": "",
          "createDate": "2018-09-04 17:05:41",
          "systemRoleRemark": ""
        }];
      },
      /**
       * 角色树点击事件
       * */
      roleTreeClick(data){
        //角色表单设置参数
        this.roleForm.systemRoleId = data.systemRoleId;
        this.roleForm.systemRoleName = data.systemRoleName;
        this.roleForm.systemRoleRemark = data.systemRoleRemark;
        //根据角色加载权限列表
        this.getTreeListByRoleId();
        //根据角色加载用户列表
        this.getStaffListByRoleId({
          sysRoleId: this.roleForm.systemRoleId,
          pageNo: 1,
          pageSize: this.userListPageSize
        });
      },
      /**
       * 打开新增角色窗口
       * */
      openAddRole(){
        this.roleForm = {};//重置表单
        this.roleInfoDialog = true;
      },
      /**
       * 打开更新角色窗口
       * */
      openUpdateRole(){
        if (this.roleForm.systemRoleId == null) {
          common.message("请选择你需要修改的角色！", "warning");
          return;
        }
        this.roleInfoDialog = true;
      },
      /**
       * 保存角色
       * */
      saveOrUpdateRole(formName){
        if (this.roleForm.systemRoleId == null) {
          this.addRole(formName);
        } else {
          this.updateRole(formName);
        }
      },
      /**
       * 新增角色
       * */
      addRole(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            common.message("操作成功", "success");
            this.getRoleList();//重置角色列表
            this.roleInfoDialog = false; //关闭弹窗
          } else {
            return false;
          }
        });
      },
      /**
       * 修改角色
       * */
      updateRole(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            common.message("操作成功", "success");
            this.getRoleList();//重置角色列表
            this.roleInfoDialog = false; //关闭弹窗
          } else {
            return false;
          }
        });
      },
      /**
       * 删除角色
       * */
      deleteRole(){
        if (this.roleForm.systemRoleId == null) {
          common.message("请选择你需要删除的角色！", "warning");
          return;
        }
        this.$confirm("确认是否删除角色【" + this.roleForm.systemRoleName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          common.message("操作成功", "success");
          this.getRoleList();//重置角色列表
          this.roleInfoDialog = false; //关闭弹窗
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      /**
       * 根据角色id获取权限列表
       * */
      getTreeListByRoleId(){
        if (this.roleForm.systemRoleId == null) {
          return;
        }
        this.rightDataList = [{
          "systemRightId": "730944568144429056",
          "systemRightName": "安全管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": [{
            "systemRightId": "774884506116030464",
            "systemRightName": "查看用户",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "safe_staff:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }, {
            "systemRightId": "774884506116030464",
            "systemRightName": "查看角色",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "safe_staff:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }]
        }, {
          "systemRightId": "730944568144429056",
          "systemRightName": "日志管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": [{
            "systemRightId": "774884506116030464",
            "systemRightName": "查看日志",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "log:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }, {
            "systemRightId": "774884506116030464",
            "systemRightName": "日志监控",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "log:play",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }]
        }];
      },
      /**
       * 根据列表的数据转换权限类型
       * */
      formatSystemRightType(row){
        var msg = "";
        switch (row.systemRightType) {
          case "1":
            msg = "菜单";
            break;
          case "2":
            msg = "按钮";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 根据列表的数据转换权限状态
       * */
      formatSystemRightIsEnabled(row){
        var msg = "";
        switch (row.isEnabled) {
          case "1":
            msg = "可用";
            break;
          case "2":
            msg = "禁止";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 根据角色id获取用户列表
       * */
      getStaffListByRoleId(params){
        if (params.sysRoleId == null) {
          return;
        }
        this.userListPageTotal = 50;//总数
        this.userListPageNo = 1;//当前页
        this.userDataList = [{
          "systemStaffId": "728162744934596608",
          "systemStaffAccount": "admin",
          "systemStaffName": "系统管理员",
          "isLocked": 1,
          "systemDeptId": "774882718214258688",
          "createDate": "2018-08-27 17:14:29",
          "systemStaffRemark": "系统管理员",
          "systemDepartment": {
            "systemDeptId": "774882718214258688",
            "systemDeptName": "办公室",
            "systemDeptParentId": "774882611477610496",
            "systemDeptSort": 1,
            "createDate": "2019-01-03 15:23:04",
            "systemDeptRemark": "",
            "childrenList": ""
          }
        }, {
          "systemStaffId": "728518892019777536",
          "systemStaffAccount": "two",
          "systemStaffName": "测试人员",
          "isLocked": 1,
          "systemDeptId": "774882718214258688",
          "createDate": "2018-08-28 16:49:40",
          "systemStaffRemark": "test",
          "systemDepartment": {
            "systemDeptId": "774882718214258688",
            "systemDeptName": "办公室",
            "systemDeptParentId": "774882611477610496",
            "systemDeptSort": 1,
            "createDate": "2019-01-03 15:23:04",
            "systemDeptRemark": "",
            "childrenList": ""
          }
        }
        ];

      },
      /**
       * 根据用户列表的数据转换
       * */
      formatIsLocked(row){
        return this.getLockedEnumMsg(row.isLocked);
      },
      /**
       * 根据部门数据转换成部门名称
       * */
      formatSystemDepartmentName(row){
        return row.systemDepartment.systemDeptName;
      },
      /**
       * 根据枚举值获取锁定状态的枚举信息
       * */
      getLockedEnumMsg(value){
        var msg = "";
        switch (value) {
          case 1:
            msg = "可用";
            break;
          case 2:
            msg = "锁定";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 分页组件-改变当前页事件监听
       * */
      currentChangeUserListPage(val){
        this.getStaffListByRoleId({
          sysRoleId: this.roleForm.systemRoleId,
          pageNo: val,
          pageSize: this.userListPageSize
        });
      },
      /**
       * 获取权限树
       * */
      getPrivilegeTree(){
        this.rightTreeList = [{
          "systemRightId": "730944568144429056",
          "systemRightName": "安全管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": [{
            "systemRightId": "774884506116030464",
            "systemRightName": "查看用户",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "safe_staff:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }, {
            "systemRightId": "774884506116030464",
            "systemRightName": "查看角色",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "safe_staff:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }]
        }, {
          "systemRightId": "730944568144429056",
          "systemRightName": "日志管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": [{
            "systemRightId": "774884506116030464",
            "systemRightName": "查看日志",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "log:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }, {
            "systemRightId": "774884506116030464",
            "systemRightName": "日志监控",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "log:play",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }]
        }];
      },
      /**
       * 打开分配权限窗口
       * */
      openSaveRightRoleDialog(){
        if (this.roleForm.systemRoleId == null) {
          common.message("请选择需要分配权限的角色", "warning");
          return;
        }
        this.rightInfoDialog = true;//先打开弹窗再渲染树，再绑定选择事件
        //根据角色id获取权限数据
        this.selectRightTreeList = this.getSystemRightIds([{
          "systemRightId": "730944568144429056",
          "systemRightName": "安全管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": {
            "systemRightId": "774884506116030464",
            "systemRightName": "查看用户",
            "systemRightParentId": "774884372812660736",
            "systemRightUrl": "",
            "systemRightPermission": "safe_staff:view",
            "systemRightType": "2",
            "isEnabled": "1",
            "systemRightSort": "1",
            "createDate": "2019-01-03 15:30:10",
            "systemRightRemark": "",
            "childrenList": ""
          }
        }]);
        this.$nextTick(function () {
          this.$refs.rightTree.setCheckedKeys(this.selectRightTreeList);
        });
      },
      /**
       * 根据权限数据转换成权限id数组
       * */
      getSystemRightIds(param){
        var resultArray = [];
        if (param instanceof Array) {
          //如果入参是列表
          for (var i = 0; i < param.length; i++) {
            resultArray.push(param[i].systemRightId);
            //子权限为空则跳过子权限循环
            if (param[i].childrenList == null || param[i].childrenList.length <= 0) {
              continue;
            }
            resultArray.concat(this.getSystemRightIds(param[i].childrenList));
          }
          return resultArray;
        }
        //如果入参是对象
        resultArray.push(param.systemRightId);
        //子权限为空直接返回父级权限id
        if (param.childrenList == null || param.childrenList.length <= 0) {
          return resultArray;
        }
        //子权限与父权限id合并
        return resultArray.concat(this.getSystemRightIds(param.childrenList));
      },
      /**
       * 分配权限
       * */
      savePrivilegeRole(){
        this.rightInfoDialog = false;
        common.message("操作成功", "success");
        if (true) {
          this.getTreeListByRoleId();
        }
      },
      /**
       * 打开新增关联窗口
       */
      addUser(){
        if (this.roleForm.systemRoleId == null) {
          common.message("请选择需要新增关联的角色", "warning");
          return;
        }
        this.addStaffInfo = true;
        this.StaffList = [{
          "systemStaffId": "728518892019777536",
          "systemStaffAccount": "two",
          "systemStaffName": "two",
          "isLocked": 1,
          "loginFailureCount": "",
          "lockDate": "2018-09-06 23:43:40",
          "loginIp": "",
          "loginDate": "2018-09-06 23:43:56",
          "systemDeptId": "728063809717010432",
          "delStatus": "1",
          "createDate": "2018-08-29 00:49:40",
          "modifyDate": "2018-09-11 23:02:22",
          "systemStaffRemark": "test",
          "systemDepartment":
            {
              "systemDeptId": "774882718214258688",
              "systemDeptName": "办公室",
              "systemDeptParentId": "774882611477610496",
              "systemDeptSort": "1",
              "createDate": "2019-01-03 15:23:04",
              "systemDeptRemark": "",
              "childrenList": ""
            }
        }
        ];
      },
      handleCurrentChange(val){
        this.currentRow = val.systemStaffId;
      },
      /**
       *新增关联
       */
      saveStaff(){
        if (this.currentRow == null) {
          common.message("请选择用户", "warning");
          return;
        }
        this.addStaffInfo = false;
        this.getStaffListByRoleId({
          sysRoleId: this.roleForm.systemRoleId,
          pageNo: 1,
          pageSize: this.userListPageSize
        });
      }
    }
  }
</script>

<style lang="scss">
  #roleList {
    .el-col {
      border-radius: 4px;
    }
    .el-main{
      padding:0;
    }
    .el-button.is-round{
      border-radius: 6px;
    }
    .el-table__expanded-cell[class*=cell]{
      padding:20px 0 20px 48px;
    }
    .grid-content{
      margin:30px;
      border-radius: 4px;
      background: white;
      padding-bottom: 20px;
      h4{
        border-bottom: 2px solid #F1F1F1;
        margin: 0 20px;
        padding: 10px 0;
      }
      .userHandle {
        padding: 15px 20px;
        line-height: 40px;

      }
    }

    .gridLeft{
      margin-right:2px;
    }
    .gridRight{
      margin-left:2px;
      .el-pagination{
        margin-top:20px;
      }
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }


</style>

